<template>
	<view>
		<u-navbar :is-back="true" :title="title" :border-bottom="false"  :title-bold="true"></u-navbar>
		<view class="search" :style="{top:topHight}">
			<view class="search-box">
				<image src="../../static/ss.png" mode=""></image>
				<input type="text" v-model="content" placeholder="请输入搜索的商品" placeholder-style="color:#B3CCFD" @input="handleInput">
			</view>
			<view class="box">
				<view class="box-left">{{total}}件商品</view>
				<view class="box-right" @click="handleSort">
					<text>{{sortName}}</text>
					<image src="../../static/lb_px@2x.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="goods">
			<goodsList :list="list"></goodsList>
		</view>
		<view class="empty" v-if="showEmpty">
			<text>暂无商品</text>
		</view>
		<view class="loadmore" v-if="isLoadmore">
			<u-loadmore :status="status" :icon-type="flower"/>
		</view>
		
		<view class="rect" v-if="show" :style="{top:height}">
			<view class="rect-item" v-for="(item,index) in sortList" :key="index" @click="handleitem(item,index)">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				size:10,
				pageTotal:'',
				total:0,
				list:[],
				showEmpty:false,
				show:false,
				topRect:'',
				title:'',
				content:'',
				categoryId:'',
				sortList:[{
					name:'综合'
				},{
					name:'销量'
				},{
					name:'新品'
				},{
					name:'价格由低到高'
				},{
					name:'价格由高到低'
				}],
				sortName:'综合',
				sortListIndex:0,
				status: 'loading',
				isLoadmore:true,
				topHight:'',
				height:'',
				share:uni.getStorageSync('share')
			}
		},
		onLoad(options) {
			if (options) {
				if (options.type == 0) {
					this.title = '搜索'
					
					if (options.content) {
					    this.content = options.content	
						this.getgoodsSearch()
					} else{
						this.isLoadmore = false
						this.showEmpty = true
					}
				}else{
					this.categoryName = options.categoryName
					this.categoryId = options.categoryId
					this.getgoodsSearch()
				}
				
			}
			this.GetStatusBarHeight()
			
		},
		methods: {
			//获取状态栏的高度
			GetStatusBarHeight() {
				let that = this;
				wx.getSystemInfo({
					success: function (res) {
						that.topHight = (res.statusBarHeight + 44)*2 + 'rpx'
						that.topRect = (res.statusBarHeight + 90)*2 + 'rpx'
						that.height = (res.statusBarHeight + 140)*2 + 'rpx'
					},
				});
			},
			//商品列表
			async getgoodsSearch(){
				const params = {
					page:this.page,
					size:this.size,
					content:this.content,
					categoryId:this.categoryId,
					orderBy:this.sortListIndex
				}
				const res = await this.$u.api.goodsSearch(params)
				if (res.total < 10) {
					this.isLoadmore = false
				}
				this.status = 'nomore'
				this.list = [...this.list,...res.rows]
				this.total = res.total
				if (res.total > 0) {
					this.showEmpty = false
				}else{
					this.showEmpty = true
				}
				this.pageTotal = Math.ceil(res.total/this.size)
				uni.stopPullDownRefresh()
			},
			//搜索商品
			handleInput(e){
				console.log(e)
				this.list = []
				this.content = e.detail.value
				this.page = 1
				this.getgoodsSearch()
			},
			//排序
			handleSort(){
				this.show = !this.show
			},
			//选择排序
			handleitem(data,index){
				this.sortName = data.name
				this.show = false
				this.sortListIndex = index
				this.page = 1
				this.list = []
				this.getgoodsSearch()
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			this.page = 1
			this.list = []
			this.getgoodsSearch()
		},
		//向上加载
		onReachBottom() {
			this.page = this.page + 1
			if (this.page <= this.pageTotal) {
				this.isLoadmore = true
				this.status = 'loading';
				setTimeout(()=>{
					this.getgoodsSearch()
				},600)
			} else{
				//this.$u.toast('没有更多数据了')
			}
		},
	}
</script>

<style scoped lang="scss">
    .search{
    	background: white;
    	width: 750rpx;
    	padding: 16rpx 28rpx;
		position: fixed;
		left: 0;
		top: 0;
    }
    .search-box{
    	padding: 20rpx;
    	background: #F6F6F6;
    	border-radius: 8px 8px 8px 8px;
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    }
    .search-box image{
    	width: 26rpx;
    	height: 22rpx;
    }
    .search-box input{
    	margin-left: 20rpx;
    	font-size: 28rpx;
    	font-family: PingFang SC-Regular, PingFang SC;
    	font-weight: 400;
    	color: #515658;
    	line-height: 38rpx;
    	width: 100%;
    }
	
	.box{
		padding-top: 28rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		
	}
	.box-left{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.box-right{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.box-right text{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 32rpx;
	}
	.box-right image{
		margin-left: 12rpx;
		width: 40rpx;
		height: 40rpx;
	}
	.goods{
		padding: 170rpx 28rpx 50rpx 28rpx;
	}
	
	.empty{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 350rpx;
	}
	.empty image{
		width: 238rpx;
		height: 76rpx;
	}
	.empty text{
		margin-top: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
	}
	.warp{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.rect {
		position: fixed;
		left: 0;
		top: 360rpx;
		width: 750rpx;
		background-color: #fff;
	}
	.rect-item{
		padding: 40rpx 28rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 32rpx;
	    border-bottom: 0.5px solid #E3E3E3;
	}
	.loadmore{
		padding-bottom: 20rpx;
	}
</style>
